<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding: 0;margin: 0;}
        li{
            list-style: none;
        }
        a{
            color: inherit;
            text-decoration: none;
        }
        img{
            vertical-align: top;
        }
        .w{
            width: 1226px;
            margin: 0 auto;
        }
        .cl::after{
            content: "";
            display: block;
            clear: both;
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }
        .main{
            margin-top: 50px;
        }
        .main .preview-wrap{
            float: left;
            width: 400px;
            margin-right: 10px;
            min-height: 600px;
            /* background-color: grey; */
            position: relative;
        }
        .main .itemInfo-wrap{
            overflow: hidden;
            min-height: 600px;
            /* background-color: pink; */
        }
        .preview{
            width: 400px;
            height: 400px;
            position: relative;
        }
        .preview .smallImg{
            width: 100%;
            height: 100%;
        }
        .preview .shadow{
            width: 200px;
            height: 200px;
            background-color:rgba(0,0,0,0.4);
            position: absolute;
            left: 0;
            top: 0;
        }
        .preview-scale{
            width: 400px;
            height: 400px;
            background-color: rgba(125,255,255,0.5);
            overflow: hidden;
            position: absolute;
            left: 410px;
            top: 0;
        }

    </style>
</head>
<body>
    <div class="container main w cl">
        <div class="preview-wrap">
            <div class="preview">
                <img src="../images/girlsmall1.jpg" alt="" class="smallImg">
                <div class="shadow"></div>
            </div>
            <!-- <div class="spec-list"></div> -->
            <div class="preview-scale">
                <img src="../images/girlbig1.jpg" alt="" class="bigImg">
            </div>
        </div>
        <div class="itemInfo-wrap"></div>
    </div>
</body>
<script>
    // 在父容器中  盒子跟随鼠标移动?
    // (1)  盒子怎么移动?   => 定位(absolute,fixed 脱离文档流 不会影响其他元素) 
    // (2)  盒子跟随鼠标移动在哪里移动?   preview/文档中
    // (3)  如何知道鼠标当前的位置   => 借助事件对象


    var previewWrap = document.getElementsByClassName("preview-wrap")[0];
    var preview = document.getElementsByClassName("preview")[0];
    var shadow = document.getElementsByClassName("shadow")[0];

    // offsetLeft offsetTop!!!!!!!!!!!!!!!!!
    // preview 的父元素 有定位属性 => 返回相对于 preview-wrap的偏移  => 不对
    // console.log(preview.offsetLeft,preview.offsetTop);

    preview.onmousemove = function(e){
        var e = e || window.event;
        var x = e.pageX - previewWrap.offsetLeft;
        var y = e.pageY - previewWrap.offsetTop;

        // 取值时记得去单位  赋值时记得加单位
        shadow.style.left = x + "px";
        shadow.style.top = y + "px";
    }



</script>
</html>